<template>
	<view @click="clickImage" class="ac_coupon-wrap" :style="{
			paddingTop,
			borderRadius:radius + 'px'
		}">
		<image v-if="src" :src="src" :class="['ac_coupon-content', {'ac_coupon-contentHover': !isMaintain }]"></image>
		<view class="maintainBox" v-if="isMaintain">
			<image src="@/static/timesheet.png" class="maintain"></image>
		</view>
		<view class="shadow" v-else>
			<image class="shadow-image" src="@/static/image/playCircle.png" mode="">
			</image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			src: {
				type: String,
			},
			paddingTop: {
				type: String,
				default: '100%'
			},
			isMaintain: {
				type: Boolean,
				default: false
			},
			radius: {
				type: Number,
				default: 10
			}
		},
		data() {
			return {}
		},
		methods: {
			clickImage() {
				if (this.isMaintain) {
					uni.showToast({
						title: 'Manutenção do jogo',
						icon: 'none'
					})
					return
				}
				this.$emit('onTap')
			}
		}
	}
</script>

<style lang="less" scoped>
	.ac_coupon-wrap {
		height: 0;
		padding-top: 100%;
		position: relative;
		border-radius: inherit;
		overflow: hidden;

		.ac_coupon-content {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
			background-size: cover;
		}

		.maintainBox {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
			background-size: cover;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgba(0, 0, 0, 0.4);

			.maintain {
				width: 20%;
				height: 20%;
			}
		}

		.shadow {
			opacity: 0;
			display: none;

			.shadow-image {
				width: 20%;
				height: 20%;
			}
		}

		&:hover .ac_coupon-contentHover {
			animation: scaleBox 0.25s ease 0s 1 normal forwards running;
		}

		&:hover .shadow {
			opacity: 1;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			background: rgba(0, 0, 0, 0.4);
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: inherit;
		}
	}

	@keyframes scaleImage {
		from {
			transform: scale(1.3);
			background: rgba(0, 0, 0, 0);
		}

		to {
			transform: scale(1);
			background: rgba(0, 0, 0, 0.4);
		}
	}

	@keyframes scaleBox {
		from {
			transform: scale(1);
		}

		to {
			transform: scale(1.1);
		}
	}
</style>